@import "./reset.css";

#header {
    height          : 60px;
    background-color: #fff;
    border-bottom   : #bbb;
    margin-bottom   : 20px;

    .header {
        display: flex;

        //logo
        h1 {
            flex       : 1;
            height     : 60px;
            align-items: center;

            a {
                img {
                    height : 100%;
                    width  : 100%;
                    display: block;
                }
            }
        }

        // 导航条
        nav {
            flex: 7;

            ul {
                height     : 60px;
                align-items: center;
                display    : flex;

                //导航条  跳转网页
                .one-nav {
                    flex: 4;

                    ul {
                        padding: 8%;
                        display: flex;

                        li {
                            flex: 1;

                            a {
                                display    : block;
                                height     : 60px;
                                font-size  : 1.2rem;
                                line-height: 60px;
                                text-align : center;
                                color      : #71777c;
                            }

                            a:hover {
                                color: #007fff;
                            }
                        }
                    }
                }

                //搜索框
                .two-input {
                    flex: 3;

                    form {
                        height          : 35px;
                        width           : 80%;
                        display         : flex;
                        border          : 1px solid hsla(0, 0%, 59.2%, .2);
                        background-color: rgba(227, 231, 236, .2);
                        border-radius   : 3px;

                        input {
                            flex            : 10;
                            height          : 100%;
                            border          : none;
                            background-color: rgba(227, 231, 236, .2);
                            color           : #666;
                            padding-left    : 10px;
                        }

                        div {
                            flex  : 2;
                            height: 100%;

                            img {
                                display         : block;
                                width           : 100%;
                                height          : 100%;
                                margin-right    : -100%;
                                background-color: rgba(227, 231, 236, .2);

                            }
                        }
                    }
                }

                //登陆  注册
                .three-button {
                    flex: 3;

                    a {
                        color    : #007fff;
                        font-size: 1.2rem;
                    }

                    ul {
                        display: flex;

                        li {
                            flex       : 5;
                            height     : 60px;
                            line-height: 60px;
                        }


                        .three-button-a {
                            display: inline-block;
                            width  : 30%;
                            height : 60px;
                        }

                        a {
                            display   : block;
                            text-align: center;
                            height    : 30px;
                        }

                        img {
                            vertical-align: middle;

                        }

                        //  |  和  * 
                        .three-button-two {
                            position        : absolute;
                            top             : 50%;
                            left            : 3.2rem;
                            width           : 3px;
                            height          : 3px;
                            background-color: #007fff;
                        }

                        .three-button-one {
                            position        : absolute;
                            top             : 35%;
                            left            : 9.4rem;
                            width           : 2px;
                            height          : 1.5rem;
                            background-color: #007fff;
                        }
                    }

                }
            }
        }
    }
}

#article {
    background-color: #fff;

    header {
        height       : 46px;
        padding      : 15px 12px;
        border-bottom: 1px solid hsla(0, 0%, 59.2%, .1);
        ;

        nav {
            ul {
                display: flex;
                width  : 20rem;
                color  : #909090;

                li {
                    flex        : 1;
                    font-size   : 1.2rem;
                    text-align  : center;
                    border-right: 2px solid hsla(0, 0%, 59.2%, .2);

                    &:hover {
                        color: #007fff;
                    }
                }

                .article-nav-lastLi {
                    border-right: none;
                }

            }
        }
    }
}